<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单词笔记</title>
    <link href="/static/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="all">
        <div class="book">
            <h1>单词备忘本</h1>
            <div class="card">
                <h3>记录卡</h3>
                <div class="inp">
                <h4>记录</h4>
                <form method="post" action="/index/?type=input&page=1">
                    <label>
                        单词
                        <input type="text" placeholder="请输入单词" name="word" />
                    </label>
                    <label>
                        解释
                        <input type="text" placeholder="请输入解释" name="explanation" />
                    </label>
                    <div style="margin: 10px 0">
                        <label>
                            备注
                            <textarea placeholder="可注明该词的出处，以及感想" name="remark"></textarea>
                        </label>
                    </div>
                    <label>
                        <input type="submit" value="提交" />
                    </label>
                    <div style="margin:5px 0 0 0">
                        <input type="text" placeholder="输入文件名" id="tablefilename" />
                        <input type="button" value="下载表格" onclick="downloadFile()" />
                        <input type="file" id="fileget" value="上传表格" />
                        <input type="button" value="上传" onclick="uploadFile()" />
                    </div>
                </form>
            </div>
                <div class="outp">
                <h4>输出所有记录</h4>
                <table border="1">
                    <thead>
                        <tr>
                            <th style="display: none">编号</th>
                            <th>单词</th>
                            <th>解释</th>
                            <th>备注</th>
                            <th><a href="javascript:void(0)" onclick="deleteCheck()">全部删除</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in allrow %}
                            <tr>
                                <td style="display: none">{{ row.id }}</td>
                                <td>{{ row.word }}</td>
                                <td>{{ row.explanation }}</td>
                                <td><a href="javascript:void(0)" onclick="showmark(this)">查看备注</a></td>
                                <td><a href="javascript:void(0)" onclick="deleterow(this)">删除</a></td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="pagediv">
                    <ul>
                        {% for page in pagecount %}
                            <li><a href="/index/?type=input&page={{ page }}">[ {{ page }} ]</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            </div>
            <div class="card cd2">
                <h3>查找卡</h3>
                <div class="search">
                <h4>查找单词</h4>
                <label>
                    查找
                    <input type="text" placeholder="请输入单词或者解释" name="search" id="search" />
                </label>
                <a href="javascript:void(0)" class="btn" onclick="searchword()">搜索</a>
            </div>
                <div class="srhresult">
                <h4>为您查找到了:</h4>
                <table border="1">
                    <thead>
                        <tr>
                            <th style="display: none">编码</th>
                            <th>单词</th>
                            <th>解释</th>
                            <th>备注</th>
                            <th>是否删除</th>
                        </tr>
                    </thead>
                    <tbody id="search_result">
                    </tbody>
                </table>
            </div>
            </div>
            <div class="card cd3">
                <h3>翻译卡</h3>
                <div class="train">
                <h4>练习一下</h4>
                <form method="post" action="/index/?type=train&page=1">
                    <label>
                        <textarea placeholder="请输入一段句子" name="source" id="source"></textarea>
                    </label>
                    <select id="type">
                        <option value="0">自动</option>
                        <option value="1">中译英</option>
                        <option value="2">英译中</option>
                        <option value="3">中译日</option>
                        <option value="4">日译中</option>
                    </select>
                    <a href="javascript:void(0)" class="btn" onclick="translate_sent()">翻译</a>
                </form>
            </div>
                <div class="trainresult">
                <h4>翻译的内容</h4>
                <p id="train_result">{{ translateCont }}</p>
            </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script>
    <script src="/static/js/index.js"></script>
    <script>
        function downloadFile() {
            var filename=$("#tablefilename").val();
            if(filename){
                filename=filename+".csv";
            }else{
                filename="default.csv"
            }
            $.ajax({
                url:"/index/?type=download",
                type:"POST",
                data:{"filename":filename},
                success:function (data) {
                    location.href="/static/downloads/"+filename;
                }
            })
        }
        function uploadFile() {
            var xhr=new XMLHttpRequest();
            xhr.open("POST","/index/?type=upload");
            var form=new FormData();
            console.log(document.getElementById("fileget").files[0]);
            form.append("csvfile",document.getElementById("fileget").files[0]);
            xhr.send(form);
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    location.href="/index/";
                }
            }
        }
    </script>
</body>
</html>